<template>
    <div id="service_detail ">
        <div class="detail_header">
            <el-page-header @back="$router.go(-1)" content="">
            </el-page-header>
        </div>
        <div class="detail_main wrapper">
            <el-row>
                <!-- 左边 -->
                <el-col :span="8">
                    <div class="__pic">
                        <img :src="serviceData.service_img"  alt="">
                    </div>
                </el-col>
                <!-- 右边 -->
                <el-col :span="16">
                    <div class="right">
                        <span class="right_tittle">{{ serviceData.service_name }}</span>
                    </div>
                    <div class="right_main">
                        <!-- 故障 -->
                        <div class="_model">
                            <div class="_pice">
                                <h1>￥{{ serviceData.service_pice }}元起</h1>
                                <p>具体服务价格参照收费标准></p>
                            </div>
                            <div class="service">
                                <div class="service_item" v-for="item in classify1" :key="item.id+'only1'">
                                    <div class="box_flex">{{ item.service_name }}</div>
                                    <div class="box_flex">{{ item.service_mony }}</div>
                                </div>
                            </div>
                        </div>
                        <div class="right_btn">
                            <button class="btn" @click="$router.push('/user/placeorder')">
                                <span class="iconfont">&#xe646;</span>
                                免费预约
                            </button>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <div class="wrapper service">
                <el-divider content-position="center"><h2>收费标准</h2></el-divider>
                <div class="service">
                    <div class="service_tittle">维修项目</div>
                    <div class="service_item" v-for="item in classify1" :key="item.id+'only2'">
                        <div class="box_flex">{{ item.service_name }}</div>
                        <div class="box_flex">{{ item.service_mony }}</div>
                    </div>
                    <div class="service_tittle">材料费用</div>
                    <div class="service_item" v-for="item in classify2" :key="item.id" >
                            <div class="box_flex">{{ item.service_name }}</div>
                            <div class="box_flex">{{ item.service_mony }}</div>
                    </div>

                </div>
            </div>
        </div>
        <el-footer>
            <MyFooter></MyFooter>
        </el-footer>
    </div>
</template>

<script>
import MyFooter from '@/components/userComponents/MyFooter.vue'
import '@/assets/font/iconfont.css'
import { getServiceItemService, getServiceClassifyService } from '@/api/repair'
export default {
  data () {
    return {
      serviceData: [],
      classify1: [],
      classify2: []
    }
  },
  async created () {
    await this.getServiceItem()
    await this.getClassify1()
    await this.getClassify2()
  },
  methods: {
    async getServiceItem () {
      const res = await getServiceItemService(this.$route.params.id)
      this.serviceData = res.data[0]
      console.log(res.data[0])
    },
    async getClassify1 () {
      const res = await getServiceClassifyService(this.$route.params.id, '0')
      this.classify1 = res.data
    },
    async getClassify2 () {
      const res = await getServiceClassifyService(this.$route.params.id, '1')
      this.classify2 = res.data
    }
  },
  components: {
    MyFooter
  }
}
</script>

<style lang="less" scoped>
.detail_main{
    // transform: translate(0,-24px);
    .__pic{
        width: 285px;
        height: 285px;
        padding-left: 20px;
        img{
            width: 100%;
        }
    }
    .right{
        padding: 30px 0;
        border-bottom: 1px solid #ccc;
        .right_tittle{
            height: 30px;
            line-height: 30px;
            font-size: 30px;
            color: #333333;
        }
    }
     .right_main{
        padding: 30px 0;
        display: flex;
        flex-direction:column;
            ._model{
                display: flex;
                // justify-content: space-around;
                ._pice{
                    h1{
                        font-size: 30px;
                        color: #ff5b2c;
                    }
                    p{
                        font-size: 16px;
                    }
                }
                .service{
                    margin: 0 auto;
                    width: 60%;
                    .service_item{
                        width: 100%;
                        height: 40px;
                        line-height: 40px;
                        display: flex;
                        justify-content: space-around;
                        align-items: center;
                        font-size: 16px;
                        font-weight: 700;
                        .box_flex{
                            width: 100%;

                            text-align: center;
                            border: 1px solid #000;
                        }

                    }

                }
            }
            .right_btn{
                margin-top: 50px;
                text-align: center;
                width: 80%;
                .btn{
                    width: 158px;
                    height: 50px;
                    line-height: 50px;
                    background: #ff5b2c;
                    text-align: center;
                    color: #fff;
                    font-size: 18px;
                    border-radius: 5px;
                    text-decoration: none;
                    border: none;
                    transition: all 0.5s;
                }
                .btn:hover{
                    transform: scale(1.1);
                }
            }

        }
}
.wrapper{
    background-color: #fff;
    margin-bottom: 30px;
    /deep/.el-divider__text{
        background-color: #f9f9f9;
    }
    .service{
        margin: 50px auto;
        width: 80%;
        .service_tittle{
            width: 100%;
            height: 40px;
            line-height: 40px;
            font-size: 18px;
            font-weight: 700;
            text-align: center;
            border: 1px solid #000;
        }
        .service_item{
            width: 100%;
            height: 40px;
            line-height: 40px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            font-size: 16px;
            font-weight: 700;
            .box_flex{
                width: 100%;
                text-align: center;
                border: 1px solid #000;
            }

        }

    }
}
/deep/.el-footer{
    margin: 0;
    padding: 0;
}

</style>
